<template>
  <view class="dynamic-page">
    <view class="code-box">
      <image class="img-logo" :src="$getImg('iassCashier/nb_logo.png')" mode="widthFix"></image>
      <view class="tip-text">根据监管要求，静态码超额交易需通过识别下方动态码完成，请点击页面按钮识别完成支付</view>
      <view class="cnAbber-text">收款方:{{dynVo.cnAbber ||'商户名称商户名称商户名称商户名称商户名称商户名称商户名称商户名称商户名称商户名称'}}</view>
      <view class="totalFee-text"><text class="flag-tag">￥</text>{{$toFixed(dynVo.totalFee)}}</view>
      <image class="qrcode-img" :src="dynamicQRimg" alt="动态二维码" mode="aspectFit" v-if="dynamicQRimg"></image>
      <image class="qrcode-img" :src="$getImg('iassCashier/qrcode_default.png')" alt="动态二维码" mode="aspectFit" v-else>
      </image>
      <button class="confirm-btn" :disabled="btnDisabled" @click="confirm">识别并支付</button>
    </view>
  </view>
</template>

<script>
  import {
    createOrder,
    callPayment
  } from "./api/pay.js";
  import {
    isEmpty,
    debounce
  } from "@/common/util.js"
  export default {
    data() {
      return {
        dynVo: {},
        btnDisabled: false,
        dynamicQRimg: ``,
        orderParams: {},
        timerDebounceFunc: null
      };
    },
    onLoad() {
      uni.hideHomeButton()
      this.dynVo = uni.getStorageSync("dynVo") || {};
      this.orderParams = uni.getStorageSync("orderParams") || {};
      this.orderParams.checkCode = "1";
      this.orderParams.codeId = this.dynVo.codeId
      if (this.dynVo.dynImg && this.dynVo.dynImg.length > 1) {
        this.dynamicQRimg = `data:image/jepg;base64,${this.dynVo.dynImg}`
      }
      this.timerDebounceFunc = debounce(() => {
        this.placeOrder()
      })
    },
    methods: {
      confirm() {
        this.placeOrder()
      },
      async placeOrder() {
        try {
          this.btnDisabled = true
          let res = await createOrder(this.orderParams),
            url = '',
            payWay = this.orderParams.payWay;
          if (res.gpsFlag == '1') {
            uni.setStorageSync("orderParams", this.orderParams)
            url = `/pages/iassCashier/location?orderNo=${res.orderNo}`;
          } else if (payWay != '1' && payWay != '2') {
            let urlKey = payWay == '13' ? 'returnUrl' : 'payUrl';
            let encodedReturnUrl = encodeURIComponent(res[urlKey]);
            url = `/pages/iassCashier/payView?url=${encodedReturnUrl}`
          }
          if (isEmpty(url)) {
            callPayment(res)
          } else {
            uni.redirectTo({
              url
            })
          }
        } catch (err) {
          this.$toast(err.respMsg || '系统异常')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dynamic-page {
    padding: 30rpx;

    .code-box {
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 8rpx 20rpx #ebedf0;
      padding: 30rpx;

      .img-logo {
        display: block;
        width: 280rpx;
        height: 80rpx;
        margin: 0 auto;
      }

      .tip-text {
        font-size: 28rpx;
        color: #8a8a8a;
        line-height: 38rpx;
        margin: 30rpx 0;
        word-break: break-all;
      }

      .cnAbber-text {
        text-align: center;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 44rpx;
        margin-bottom: 30rpx;
        word-break: break-all;
      }

      .totalFee-text {
        text-align: center;
        font-weight: 700;
        font-size: 42rpx;
        margin-bottom: 30rpx;

        .flag-tag {
          font-size: 40rpx;
        }
      }

      .qrcode-img {
        width: 380rpx;
        height: 380rpx;
        display: block;
        margin: 0 auto;
        margin-bottom: 30rpx;
      }

      .confirm-btn {
        display: block;
        background: linear-gradient(90deg, #FF9900 0%, #FF8400 100%);
        border-radius: 40rpx;
        font-size: 32rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
      }

    }
  }
</style>